<template>
  <div class="search-recommend-box">
    <div class="recommend-label">
      搜索“<span class="keyword">{{ keyWord }}</span
      >”的人还下载了
    </div>
    <div
      class="recommend-item-container"
      v-for="item in items"
      :key="item.id"
      @click="goToDetail(item.id)"
    >
      <span class="recommend-item"
        ><img class="recommend-icon" :src="getFileIcon(item.fileSuffix)" />
        {{ item.fileName }}</span
      >
      <span class="readings">{{ item.downloadNum }}下载</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    keyWord: { require: true, type: String },
    items: { require: true},
  },
  methods: {
    //根据文件类型显示不同图标
    getFileIcon(type) {
      switch (type) {
        case "doc":
          return require("@/assets/image/common/fileIcon/file-word.png");
        case "docx":
          return require("@/assets/image/common/fileIcon/file-word.png");
        case "pdf":
          return require("@/assets/image/common/fileIcon/file-pdf.png");
        case "txt":
          return require("@/assets/image/common/fileIcon/file-text.png");
        case "xlsx":
          return require("@/assets/image/common/fileIcon/file-excel.png");
        case "ppt":
          return require("@/assets/image/common/fileIcon/file-ppt.png");
        case "pptx":
          return require("@/assets/image/common/fileIcon/file-ppt.png");
        case "rar":
          return require("@/assets/image/common/fileIcon/file-zip.png");
        case "zip":
          return require("@/assets/image/common/fileIcon/file-zip.png");
      }
    },
    goToDetail(fileId) {
      this.$router.push({
        path: "/docdetail",
        query: {
          id: fileId,
        },
      });
    },
  },
};
</script>

<style scoped>
.search-recommend-box {
  width: 280px;
  margin-top: 40px;
  margin-left: 48px;
  margin-bottom: 40px;
  display: inline-block;
  vertical-align: top;
}
.recommend-label {
  margin-bottom: 8px;
}
.keyword {
  color: red;
}
.recommend-item-container {
  cursor: pointer;
  width: 360px;
}
.recommend-item {
  float: left;
  margin-right: 0;
  height: 24px;
  width: 240px;
  margin-top: 2px;
  font-size: 14px;
  color: blue;
  line-height: 24px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.recommend-item:hover {
  text-decoration: underline;
}
.recommend-icon {
  display: inline-block;
  height: 18px;
  width: 18px;
  vertical-align: text-bottom;
}
.readings {
  height: 24px;
  line-height: 24px;
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: rgba(1, 1, 1, 0.5);
  float: right;
}
</style>
